<template>
<div class="main_box" style="max-height: 800px;overflow: auto;">
  <!-- <el-row>
    <el-col :span="10">
      <div style=" height: 50px; line-height: 50px; font-size: 15px; text-align: right;">
      当前角色：{{ roleName }}
      </div>
    </el-col>
    <el-col :span="2">
      <div class="opration_wrap">
        <el-button type="primary" icon="fa fa-mail-forward" @click="returnList">返回</el-button>
      </div>
    </el-col>
  </el-row> -->
  <el-row>
    <el-col style="display: flex; align-items: center; justify-content: space-between; padding: 5px 30px;">
      <div style="font-size:17px;">
        <el-tag>当前角色：</el-tag>  <b>{{ roleName }}</b>
      </div>
      <el-button type="success" plain size="small" icon="fa fa-mail-forward" @click="returnList"> 返 回</el-button>
    </el-col>
  </el-row>
  <div class="role_wrap">
    <div class="role_con" v-for="(roles, index) in roleMenus" v-if="isRolesShow[index].isShow">
      <div class="tit">
        <h2><el-checkbox v-model="checkAll[index].checked" :label="roles.menuName" :key="roles.menuId" size="mini" @change="handleAllCheckedChange(index, $event)">{{roles.menuName}}</el-checkbox></h2>
      </div>
      <div class="con" v-if="role.children.length > 0" v-for="(role, k) in roles.children">
        <h5><el-checkbox v-model="checkSecAll[index][k].checked" @change="handleSecCheckAllChange(index, k, $event)" size="mini">{{role.menuName}}</el-checkbox></h5>
        <!--<p>{{checkSecAll[index][k]}}</p>-->
        <el-checkbox-group v-model="checkedGroup[index][k]" @change="handleCheckedChange(index,k, $event)">
          <el-checkbox v-for="item in role.children" :label="item.menuName" :key="item.menuId" size="mini" border>{{item.menuName}}</el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
    <el-row style="padding-left: 200px;">
        <el-button type="primary" @click="sureClick">保 存</el-button>
        <el-button @click="returnList">取 消</el-button>
    </el-row>
  </div>
 </div>
</template>

<script>
import * as message from "@/constants/message";
import AuthApi from "@/api/system/auth";
export default{
  data(){
    return {
      checkAll: [],
      checkSecAll: [],
      checkedGroup:[],
      roleMenus:[],
      isRolesShow: [],
      roleType: "",
      roleName: this.$route.query.roleName,

    }
  },
  mounted(){
    this.init();
  },
  methods: {
    init(){
      this.getData();
    },
    getData(){
      AuthApi.listRoleMenus({roleId:this.$route.query.id,roleType:this.$route.query.roleType})
      .then(res => {
        this.roleMenus = res.data;
        this.roleMenus.forEach((item, index) => {
          this.isRolesShow.push({isShow:true});
          this.checkedGroup.push([]);
          this.checkAll.push({checked: false})
          this.checkSecAll.push([]);
          item.children.forEach((groupItem, n) => {
            this.checkedGroup[index].push([]);
            this.checkSecAll[index].push({checked: false});
            if(groupItem.children.length > 0){
              groupItem.children.forEach(childItem => {
                // this.checkSecAll[index][n].push({checked: false});
                if(childItem.isCheck){
                  this.checkedGroup[index][n].push(childItem.menuName);
                }
              })
              this.handleCheckedChange(index,n,this.checkedGroup[index][n])
            }
          });
        });
        this.checkedGroup.forEach((item, r) => {
          this.isRolesShow[r].isShow = item.length > 0 ? true : false;
        })
      })
    },
    handleAllCheckedChange(index, value){
      if(value == true){
        this.checkSecAll[index].forEach((item, n) => {
          item.checked = true;
          this.handleSecCheckAllChange(index,n,true)
        })
      }else{
        this.checkSecAll[index].forEach((item, n) => {
          item.checked = false;
          this.handleSecCheckAllChange(index,n,false)
        })
      }
    },
    handleSecCheckAllChange(index,k,val){
      let groupOptions = [];
      this.roleMenus[index].children[k].children.forEach(item => {
        groupOptions.push(item.menuName);
      })
      this.checkedGroup[index][k] = val? groupOptions : [];
      if(val == false){
        this.checkAll[index].checked = false;
      }
      let checkNum = 0;
      this.checkSecAll[index].forEach(item => {
        if(item.checked == true){
          checkNum++
        }
      })
      this.checkAll[index].checked = checkNum == this.checkSecAll[index].length? true : false;
    },
    handleCheckedChange(index,k,value){
      let checkedCount = value.length;
      this.checkSecAll[index][k].checked = checkedCount === this.roleMenus[index].children[k].children.length;
      this.checkAll[index].checked = true;
      this.checkSecAll[index].forEach(item => {
        if(item.checked == false){
          this.checkAll[index].checked = false;
        }
      })
    },
    sureClick() {
      this.$confirm(message.MSG_CONFIRM_SAVE_ALTER, message.TITLE_PROMPT, {})
      .then(() => {
        this.setRole();
      })
    },
    setRole() {
      let menuIds = [];
      this.checkedGroup.forEach((roles, m) => {
        roles.forEach((role, n) => {
          if(role.length > 0){
            if(menuIds.indexOf(this.roleMenus[m].menuId) == -1){
              menuIds.push(this.roleMenus[m].menuId);
            }
            menuIds.push(this.roleMenus[m].children[n].menuId);
          }
          role.forEach((item, k) => {
            let menuData = this.roleMenus[m].children[n].children
            menuData.forEach(child=>{
              if (child.menuName == item){
                menuIds.push(child.menuId)
              }
            })
          })
        })
      })
      let data = {
        menuIds: menuIds,
        roleId: this.$route.query.id,
        roleName: this.$route.query.roleName
      };
      AuthApi.updateRoleMenus(data)
          .then(res => {
          this.$notify.success({
          title: message.TITLE_SUCCESS,
          message: message.MSG_ACTION_SUCCESS
        });
        this.returnList()
      })
    },
    returnList(){
      this.$store.dispatch('delView', this.$route);
      this.$router.push({path: '/sys/roleManagement'})
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/assets/css/views/role.scss";
</style>
